<template>
	<view class="content">
		<u-sticky>
			<u-tabs  :list="list" :is-scroll="false" :current="current" @change="change"
				:barStyle="barStyle" active-color="#fff" inactive-color="#fff" bg-color="#262626"></u-tabs>
		</u-sticky>

		<view class="youhuquan" v-if="couponList.length == 0">
			<image
				src="https://mh.qingfentool.vip/upload/image/20230522/f4531b9efda28541e8c811554ed10626.png"
				mode="scaleToFill"
			/>
		</view>

		<view class="couplist " v-for="(item, index) in couponList" :key="index" v-else
			:style="{ backgroundImage: current == 0 ? 'url(' + `${urls}/static/newImg/youhuione.jpg` + ')' : current == 1 && item.status == 2 ? 'url(' + `${urls}/static/newImg/youhui.jpg` + ')' : current == 1 && item.status == 1 ? 'url(' + `${urls}/static/newImg/youhui.jpg` + ')' : '' }">
			<view class="left flexs">
				<!-- 未使用 -->
				<view class="left_cont" v-if="item.status === 0">
					<view class="sub_price" style="color:#45E9E3 ;">￥{{ item.sub_price }}</view>
					<text>{{ item.text }}</text>
				</view>
				<!-- 已过期 -->
				<view class="left_cont" v-else-if="item.status === 1">
					<view class="textInfo" style="color: #fff;">￥{{ item.sub_price }}</view>
					<text>{{ item.text }}</text>
					<image :src="urls + '/static/newImg/used.png'" mode="scaleToFill"></image>


				</view>
				<!-- 已使用 -->
				<view class="left_cont" v-else>
					<view class="textInfo" style="color: #fff;">￥{{ item.sub_price }}</view>
					<text>{{ item.text }}</text>
					<image :src="urls + '/static/newImg/watermark.png'" mode="scaleToFill"></image>
				</view>
			</view>

			<view class="con">
				<view class="name">{{ item.name }}
				</view>
				<view class="timesone">{{ item.title }}</view>
				<view class="timestwo">{{ item.begin_time }}-{{ item.end_time }}</view>
			</view>
			<!-- <image class="guoqi" src="https://pd.pdaxiang.com/upload/static/user/guoqi.png" v-if="current==1"></image> -->
		</view>
		<u-loadmore :status="morestatus" v-if="couponList != ''" :load-text="loadText" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadText: {
				loadmore: '上拉加载更多',
				loading: '正在加载，请喝杯茶',
				nomore: '我是有底线的'
			},
			morestatus: "loadmore",
			current: 0,
			list: [{
				name: '可用'
			},
			{
				name: '已使用/已过期'
			}
			],
			urls: this.$configs.urls,
			picUrl: this.$configs.urls + '/static/newImg/watermark.png',
			page: 1,
			isNav: 1,
			couponList: [],
			status: 1, //1待使用2已过期
			barStyle: {
				backgroundColor: "#FFAE2A",
				zIndex: 999
			},
		}
	},
	onShow() {
		this.getlist()
	},
	//下拉刷新函数
	onPullDownRefresh() {
		this.page = 1;
		this.getlist()
	},
	//触底
	onReachBottom() {
		this.page++
		this.morestatus = "loading"
		this.getlist(2)
	},
	methods: {
		change(index) {
			this.current = index;
			this.recordList = [];
			this.page = 1;
			if (this.current == 1) {
				this.status = 2
			} else {
				this.status = 1
			}
			this.getlist()
		},
		goexchang() {
			uni.switchTab({
				url: "/pages/index/redouble"
			})
		},
		getlist(type) {
			let data = {
				page: this.page,
				status: this.status
			}
			this.$Request.get(this.$api.user.cardList, data).then(res => {
				////console.log(res, 'red');
				uni.stopPullDownRefresh();
				if (res.code == 406) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/center/user"
						})
					}, 800)
					clearTimeout();
					return
				}
				if (type == 2) {
					this.couponList = this.couponList.concat(res.data.list);
					if (res.data.list == '') {
						this.morestatus = "nomore"
					}
					return
				}
				this.couponList = res.data.list;
				////console.log(this.couponList);
				this.morestatus = "loadmore"
			});
		},
		chose(isNav) {
			this.isNav = isNav
			this.page = 1;

			this.getlist()
		}
	}
}
</script>

<style lang="scss" scoped>
.youhuquan {
	margin: auto;
	margin-top: 300rpx;
	width: 575rpx;
	height: 538rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.content {
	min-height: 100vh;
	background: #262626;
	color: #333333;
	padding-top: 10rpx;

	.couplist {
		position: relative;
		width: 710rpx;
		height: 180rpx;
		background-size: 100% 100%;
		margin: 30rpx auto 0 auto;
		// border: 2rpx solid #FFD453;
		border-radius: 10rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
		position: relative;
		margin-bottom: 20rpx;

		.guoqi {
			width: 88rpx;
			height: 84rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.left {
			width: 244rpx;
			height: 152rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;

			.size26 {
				font-size: 26rpx;
			}

			.left_cont {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;


				image {
					width: 107rpx;
					height: 82rpx;
					position: absolute;
					top: 30rpx;
					right: 21rpx;
				}

				view {
					font-size: 54rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}

				// .textInfo {
				// 	font-size: 54rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: bold;
				// 	color: #fff;
				// }

				// .sub_price {
				// 	font-size: 54rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: bold;
				// 	color: #45E9E3;
				// }
			}

			.text-bold {
				font-size: 70rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}

		.con {
			margin-left: 35rpx;

			view {
				font-family: PingFang SC;
				color: #fff;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.timesone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
			}

			.timestwo {
				font-size: 18rpx;
				font-weight: 400;
				margin-top: 25rpx;
			}
		}

		.l_btns {
			width: 126rpx;
			margin-top: 60rpx;
		}

		.l_btn {
			width: 126rpx;
			height: 49rpx;
			border-radius: 49rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			background: #FFD453;
		}

		.chehui {
			background: #C0C0C0;
		}
	}

	.list2 {
		background-size: 100% 100%;
	}


}</style>
